<template>
	<div class="devices-return">
		<div style="display: flex; justify-content: space-between">
			<div>

			</div>
			<div>
				<el-select v-model="userId" filterable remote :loading="userLoading" 
					placeholder="按申请人搜索" v-if="userInfo.roleId === '1'"
					@change="getTableData" :remote-method="getUserList" 
					@focus="getUserList('')" style="width: 150px;" size="mini">
					<el-option v-for="item in userList" :key="item.id" 
						:label="item.nickName" :value="item.id">
					</el-option>
				</el-select>
				<el-select v-model="returnStatus" style="width: 120px;" 
					@change="getTableData" placeholder="归还状态" size="mini">
					<el-option label="已通过" :value="0"></el-option>
					<el-option label="待审核" :value="1"></el-option>
					<el-option label="被驳回" :value="2"></el-option>
					<el-option label="待申请" :value="3"></el-option>
				</el-select>
				<el-button @click="reset" style="margin-left: 10px;" size="mini">
					重置
				</el-button>
			</div>
		</div>

		<!-- 展示列表 -->
		<div class="goods-table">
			<el-table :data="tableData" v-loading="loading" border stripe 
				style="width: 100%" height="100%">
				<el-table-column prop="i" label="序号" fixed="left" width="50">
				</el-table-column>
				<el-table-column prop="nickName" label="申请人" width="80">
				</el-table-column>
				<el-table-column prop="price" label="产品列表" width="80">
					<template slot-scope="scope">
						<el-button type="text" @click="partsOpen(scope.row)">点击查看</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="returnType" label="归还类型" width="80">
					<template slot-scope="scope">
						<span v-if="scope.row.returnType === '0'">归还</span>
						<span v-if="scope.row.returnType === '1'">更换</span>
					</template>
				</el-table-column>
				<el-table-column prop="qualityStatus" label="质量状态" width="80">
					<template slot-scope="scope">
						<span v-if="scope.row.qualityStatus === '0'">完整</span>
						<span v-if="scope.row.qualityStatus === '1'">损坏</span>
					</template>
				</el-table-column>
				<el-table-column prop="returnTime" label="申请时间" width="170">
				</el-table-column>
				<el-table-column label="归还状态" width="80">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.returnStatus === '0'" type="success">
							已通过
						</el-tag>
						<el-tag v-if="scope.row.returnStatus === '1'" type="warning">
							待审核
						</el-tag>
						<el-tag v-if="scope.row.returnStatus === '2'" type="danger">
							被驳回
						</el-tag>
						<el-tag v-if="scope.row.returnStatus === '3'">待申请</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" fit>
				</el-table-column>
				<el-table-column label="操作" width="80" fixed="right">
					<template slot-scope="scope">
						<el-button size="mini" type="text" 
							@click="examineDialog(scope.row)" 
							:disabled="buttonDisabled(scope.row.returnStatus)">
							{{buttonText(scope.row.returnStatus)}}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background :current-page="currentPage" :page-size="pageSize" 
				:total="total" :page-sizes="[20, 50, 100]" 
				@size-change="handleSizeChange" @current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper" >
			</el-pagination>
		</div>
		<!-- 查看产品列表弹窗 -->
		<el-dialog style="margin-top:0" :visible.sync="partsShow" width="80%" 
			:title="selectTitle" @close="partsClose">
			<div class="data-table">
				<el-table :data="selectData.outboundPartVoList" border stripe style="width: 100%" 
					:max-height="500">
					<el-table-column prop="i" fixed="left" label="序号" width="50">
					</el-table-column>
					<el-table-column label="图片" width="115">
						<template slot-scope="scope">
								<el-image :src="READ_IMG_URL+scope.row.image" 
								style="width: 90px; height: 90px;"
								:preview-src-list="new Array(READ_IMG_URL+scope.row.image)">
								</el-image>
						</template>
					</el-table-column>
					<el-table-column prop="isProduct" label="产品类型" width="80">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.isProduct == 0">成品</el-tag>
							<el-tag type="warning" v-if="scope.row.isProduct ==1">零件</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="partName" label="零件名称" fit>
					</el-table-column>
					<el-table-column prop="model" label="零件型号" fit>
					</el-table-column>
					<el-table-column prop="devicesDescribe" label="产品描述" fit>
					</el-table-column>
					<el-table-column prop="remark" label="备注" fit>
					</el-table-column>
					<el-table-column prop="outboundCount" label="出库数量" width="80">
					</el-table-column>
					<el-table-column prop="returnCount" label="归还数量" width="80">
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>
		<!-- 申请 -->
		<el-dialog style="margin-top:0" :visible.sync="examineShow" width="80%" 
			:title="examineTitle" @close="examineClose">
			<el-form inline label-position="top" :model="selectData" :rules="rules" ref="ruleForm">
				<el-form-item prop="returnType" label="归还类型" style="width: 450px;">
					<el-select v-model="selectData.returnType" style="width: 100%;"
						placeholder="归还类型" :disabled="formDisabled()">
						<el-option label="归还" value="0"></el-option>
						<el-option label="更换" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="qualityStatus" label="质量状态" style="width: 450px;">
					<el-select v-model="selectData.qualityStatus" style="width: 100%;"
						placeholder="质量状态" :disabled="formDisabled()">
						<el-option label="完整" value="0"></el-option>
						<el-option label="损坏" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="申请备注" style="width: 450px;">
					<el-input type="text" v-model="selectData.remark" style="width: 100%;"
						placeholder="备注" :readonly="formDisabled()">
					</el-input>
				</el-form-item>
			</el-form>
			<div class="data-table">
				<el-table :data="selectData.outboundPartVoList" border stripe style="width: 100%" 
					:max-height="400">
					<el-table-column prop="i" fixed="left" label="序号" width="50">
					</el-table-column>
					<el-table-column label="图片" width="115">
						<template slot-scope="scope">
							<el-image :src="READ_IMG_URL+scope.row.image" 
								style="width: 90px; height: 90px;"
								:preview-src-list="new Array(READ_IMG_URL+scope.row.image)">
							</el-image>
						</template>
					</el-table-column>
					<el-table-column prop="isProduct" label="产品类型" width="80">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.isProduct == 0">成品</el-tag>
							<el-tag type="warning" v-if="scope.row.isProduct ==1">零件</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="partName" label="零件名称" fit>
					</el-table-column>
					<el-table-column prop="model" label="零件型号" fit>
					</el-table-column>
					<el-table-column prop="outboundCount" label="出库数量" width="80">
					</el-table-column>
					<el-table-column prop="returnCount" label="归还数量" width="80">
					</el-table-column>
				</el-table>
			</div>
			<div slot="footer">
				<div v-if="selectData.returnStatus!=='3' && selectData.returnStatus!=='2'">
					<el-button type="danger" @click="examine(2)">驳回</el-button>
					<el-button type="success" @click="examine(0)">通过</el-button>
				</div>
				<div v-else>
					<el-button @click="examineShow=false">取消</el-button>
					<el-button type="primary" @click="apply()">申请</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import userApi from "../../api/user.js";
	import warehouseApi from "../../api/warehouse.js";
  import config from '../../api/apiURL.js';
	export default {
		data() {
			return {
        READ_IMG_URL: config.READ_IMG_URL,
				userInfo: {},
				tableData: [],
				loading: false,
				userId: null,
				returnStatus: null,
				currentPage: 1,
				pageSize: 50,
				total: 0,
				userLoading: false,
				userList: [],
				partsShow: false,
				selectData: {
					returnType: null,
					qualityStatus: null,
					outboundPartVoList: []
				},
				selectTitle: '',
				examineShow: false,
				examineTitle: '',
				rules: {
					returnType: [{
						required: true, message: '请选择归还类型', trigger: 'change'
					}],
					qualityStatus: [{
						required: true, message: '请选择质量状态', trigger: 'change'
					}]
				}
			}
		},
		created() {
			this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
			this.getTableData();
		},
		methods: {
			// 获取表格数据
			getTableData(){
				this.loading = true;
				const data = {
					userId: this.userId,
					returnStatus: this.returnStatus,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				}
				warehouseApi.getDevicesReturnList(data).then(res =>{
					if (res.code === 200){
						this.total = res.data.total;
						this.tableData = res.data.devicesReturnVoList.map((item,index) =>{
							item.i = (this.currentPage-1)*this.pageSize+index+1;
							return item;
						})
					}
				}).finally(() =>{
					this.loading = false;
				})
			},
			// pageSize变化
			handleSizeChange(pageSize) {
				this.pageSize = pageSize
				this.getTableData()
			},
			// 页码变化
			handleCurrentChange(curPage) {
				this.currentPage = curPage
				this.getTableData()
			},
			// 重置
			reset(){
				this.userId = null;
				this.returnStatus = null;
				this.currentPage = 1;
				this.getTableData();
			},
			// 远程搜索
			getUserList(query) {
				this.userLoading = true;
				const data = {
					nickName: query,
				}
				userApi.fuzzyQuery(data).then(res => {
					if (res.code === 200) {
						this.userList = res.data.userVoList;
						this.userLoading = false;
					}
				})
			},
			// 展示零件列表
			partsOpen(row){
				row.outboundPartVoList.forEach((part,index) =>{
					part.i = index +1
				})
				this.selectData = row;
				this.selectTitle = row.nickName;
				this.partsShow = true;
			},
			// 关闭零件列表
			partsClose(){
				this.selectData = {}
				this.selectTitle = ""
			},
			// 按钮类型
			buttonType(returnStatus){
				if (returnStatus === '0'){
					return "success"
				}else if (returnStatus === '1'){
					return "warning"
				}else if (returnStatus === '2'){
					return "danger"
				}
				return "primary"
			},
			// 按钮禁用
			buttonDisabled(returnStatus){
				if (returnStatus === '0'){
					return true;
				}else if (returnStatus === '1' && this.userInfo.roleId === "1"){
					return false;
				}else if (returnStatus === '2' || returnStatus === '3'){
					return false;
				}
				return true;
			},
			// 按钮文字
			buttonText(returnStatus){
				if (returnStatus === '0'){
					return "申请通过"
				}else if (returnStatus === '1'){
					return "待审核中"
				}else if (returnStatus === '2'){
					return "申请驳回"
				}
				return "申请归还"
			},
			// 审核弹窗
			examineDialog(row){
				if (row.returnStatus === '3'){
					// 待申请
					this.selectData = row
					this.selectData.outboundPartVoList = row.outboundPartVoList.map((item,index) =>{
						item.i = index+1;
						item.returnCount = item.outboundCount;
						return item;
					})
					this.examineShow = true
					this.examineTitle = "申请"
				}else if (row.returnStatus !== '0'){
					// 待审核，已驳回
					this.selectData = row
					this.examineShow = true
					this.examineTitle = "审核"
				}
			},
			// 审核弹窗关闭
			examineClose(){
				this.selectData = {}
				this.examineTitle = ""
			},
			formDisabled(){
				if (this.selectData.returnStatus === '1' && this.userInfo.roleId === '1'){
					return true;
				}
				return false;
			},
			// 申请
			apply(){
				this.$refs.ruleForm.validate((valid) => {
				    if (!valid) {
						this.$message.error("请将订单填写完整！");
				        return false;
				    }
					const loading = this.$loading({
					    lock: true,
					    text: 'Loading',
					    spinner: 'el-icon-loading',
					    background: 'rgba(0, 0, 0, 0.7)'
					});
					warehouseApi.addDevicesReturn(this.selectData).then(res =>{
						if (res.code === 200){
							this.$message.success("操作成功");
							this.examineShow = false;
							this.getTableData();
						}
					}).finally(() =>{
						loading.close();
					});
				});
			},
			// 审核
			examine(index){
				let msg = ""
				if (index === 0){
					msg = "是否要通过该申请"
				}else {
					msg = "是否要驳回该申请"
				}
				this.$confirm(msg,"提示",{
					cancelButtonText: "取消",
					confirmButtonText: "确定",
					type: 'warning'
				}).then(() =>{
					const data = {
						id: this.selectData.id,
						returnStatus: index
					}
					warehouseApi.examineDevicesReturn(data).then(res =>{
						if (res.code === 200){
							this.$message.success("操作成功");
							this.examineShow = false;
							this.getTableData();
						}
					})
				}).catch(() =>{
					
				})
			},
			
		},
	}
</script>

<style scoped>
	.devices-return{
		height: 100%;
	}
	
	.goods-table {
		height: 94%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		margin-top: 10px;
	}
</style>